<template>
  <a-card title="消息中心"
          style="width: 100%">
    <a-list class="demo-loadmore-list"
            item-layout="horizontal">
      <a-list-item v-for="(item, index) in data"
                   :key="index">
        <a-button slot="actions"
                  :disabled="item.isRead"
                  type="primary"
                  @click="setRead(index)">点击已完成</a-button>
        <a-button slot="actions"
                  type="danger"
                  ghost
                  @click="delRead(index)">删除</a-button>
        <a-list-item-meta :description="item.content">
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>

export default {
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.data = this.$store.state.msgLists
    },
    setRead (index) {
      this.$store.commit('set_Read', index)
    },
    delRead (index) {
      this.$confirm({
        title: '删除消息',
        content: h => <div style="color:red;">你确定要删除这一条消息吗？</div>,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$store.commit('del_Read', index)
          this.$message.success('删除成功', 1, () => {
            this.$router.go(0)
          })
        }
      })
    }
  }
}
</script>
<style>
.demo-loadmore-list {
  min-height: 350px;
}
</style>
